import React, { Fragment } from 'react';
import { Text } from '@vx/text';
import MyIcon from '@/components/MyIcon';

function ServiceNode({ node, onClick, rootKey, nodeKey, nodeBorder, nodeBorderWidth = 2 }) {
  const width = 120;
  const height = 20;
  if (typeof rootKey === 'function') {
    rootKey = rootKey(node);
  }
  if (typeof nodeKey === 'function') {
    nodeKey = nodeKey(node);
  }

  let nodeBorderColor;
  if (typeof nodeBorder === 'function') {
    nodeBorderColor = nodeBorder(node);
  }
  return (
    <Fragment>
      {node.depth === 0 && (
        <>
          <circle
            r={40}
            fill="#fff"
            stroke={nodeBorderColor}
            strokeWidth={nodeBorderWidth}
            onClick={onClick}
            style={{ cursor: 'pointer' }}
          />
          <foreignObject
            x={-24}
            y={-25}
            width={50}
            height={65}
            style={{ cursor: 'pointer' }}
            onClick={onClick}
          >
            <body style={{ background: 'transparent' }}>
              <MyIcon
                style={{ fontSize: 40, paddingLeft: 4 }}
                type={`icon-${node.data.serviceTypeCode}`}
              />
              <span
                style={{
                  width: 50,
                  display: 'inline-block',
                  textAlign: 'center',
                  fontSize: 9,
                  position: 'absolute',
                  top: 40,
                  left: 0,
                }}
              >
                {node.data.alias}
              </span>
            </body>
          </foreignObject>
        </>
      )}
      {node.depth !== 0 && (
        <rect
          height={height}
          width={width}
          y={-height / 2}
          x={-width / 2}
          fill={'#fff'}
          stroke={node.data.children ? '#1890FF' : '#322322'}
          strokeWidth={node.data.children ? 5 : 1}
          strokeOpacity={!node.data.children ? 0.6 : 1}
          rx={!node.data.children ? 3 : 0}
          onClick={onClick}
          style={{ cursor: 'pointer' }}
        />
      )}
      <Text
        dy={'.33em'}
        fontSize={node.depth === 0 ? 20 : 10}
        width={200}
        fontFamily="Arial"
        textAnchor={'middle'}
        style={{ pointerEvents: 'none' }}
        fill={node.depth === 0 ? '#71248e' : node.children ? 'white' : '#666'}
      >
        {node.depth === 0 ? '' : nodeKey}
      </Text>
    </Fragment>
  );
}

export default ServiceNode;
